<template>
  <div class="search-result">
    <div class="films">
      <div v-for="(item, index) in resultData" :key="index">
        <div class="top">电影/电视剧/综艺</div>

        <div
          class="item"
          v-for="(resultItem, index) in item"
          :key="index"
          @click="movieDeatil(resultItem.id)"
        >
          <!-- {{item[0]}} -->
          <div class="cover">
            <img class="auto-img" :src="resultItem.poster" alt="" />
          </div>
          <div class="item-box clearfix">
            <div class="item-top">
              <div class="name one-text fl">{{ resultItem.name }}</div>

              <div class="item-score fr" v-if="resultItem.score != 0">
                <span class="num">{{ resultItem.score }}</span
                >分
              </div>
              <div
                class="item-score fr"
                v-else-if="resultItem.score.length == 0"
              >
                <span class="audience">暂无评分</span>
              </div>
            </div>
            <div class="foreign-name one-text">{{ resultItem.ename }}</div>
            <div class="item-type">{{ resultItem.catogary }}</div>
            <div class="shown">{{ resultItem.release }}</div>
          </div>
        </div>
        <div class="bottom">查看全部</div>
      </div>
    </div>

    <div class="cinemas">
      <div v-for="(item, index) in cinemaData" :key="index">
        <div class="top">影院</div>

        <div
          class="cinema-item"
          v-for="(cinemaItem, index) in item"
          :key="index" @click="goCinemaDetail(cinemaItem.id)"
        >
          <div class="cinema-list-top clearfix">
            <div class="cinema-name one-text fl">
              {{ cinemaItem.info.name }}
            </div>
            <div class="cinema-price fr">
              <span class="price">{{ cinemaItem.info.price }}</span
              >元起
            </div>
          </div>
          <div class="cinema-list-center clearfix">
            <div class="cinema-position fl one-text">
              {{ cinemaItem.info.address }}
            </div>
          </div>
          <div class="cinema-list-bottom">
            <div
              class="change"
              v-for="(tagItem, index) in cinemaItem.info.tags"
              :key="index"
            >
              {{ tagItem }}
            </div>
          </div>
        </div>
        <div class="cinema-bototm">查看全部</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "SearchResult",
  data() {
    return {
      content: "",
    };
  },
  computed: {
    ...mapState(["resultData"]),
    ...mapState(["cinemaData"]),
  },

  created() {},
  methods: {
    // 点击跳转到影片详情
    movieDeatil(movieId) {
      // 获取点击的影片id
      this.$router.push({ name: "MovieDetail", params: { movieId } });
    },

    // 跳转到影院详情
    goCinemaDetail(cinemaId){
      this.$router.push({name:'CinemaDetail',params:{cinemaId}})
    }
  },
};
</script>

<style lang="less" scoped>
.search-result {
  background-color: #fff;
  // padding: 12px;
}
// .films,.cinemas{
//   padding: 12px;
// }
.top {
  font-size: 15px;
  color: #999;
  border-bottom: 1px solid #ddd;
  // padding-bottom: 12px;
  padding: 12px;
}
.item {
  // border: 1px solid #000;
  border-bottom: 1px solid #ddd;
  // width: 100%;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  // padding-top: 10px;
  // padding-bottom: 10px;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }
  .cover {
    width: 70px;
    img {
      height: 100px;
    }
  }
  .item-box {
    // border: 1px solid #000;
    margin-left: 10px;
    .item-top {
      height: 26px;
    }
    .name {
      width: 200px;
      font-size: 17px;
      font-weight: bold;
      color: #333;
    }
    .foreign-name {
      width: 200px;
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }

    .item-type {
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }
    .shown {
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }
  }
  .item-score {
    // border: 1px solid #000;
    font-size: 14px;
    color: #999;
    // margin-top: -60px;
    position: absolute;
    // top: 15px;
    right: 12px;
    .num {
      font-size: 18px;
      color: #faaf00;
    }
  }
}
.bottom,
.cinema-bototm {
  padding-top: 12px;
  // padding-bottom: 10px;
  font-size: 15px;
  color: #ef4238;
  text-align: center;
}
.cinema-item {
  // border: 1px solid #000;
  // padding-top: 10px;
  // padding-bottom: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
  .cinema-name {
    width: 280px;
    font-size: 18px;
    font-weight: bold;
  }
  .cinema-price {
    color: #aaa;
    margin-top: 5px;
    .price {
      color: #dd403b;
      font-size: 16px;
    }
  }
  .cinema-list-center {
    margin-top: 10px;
    margin-bottom: 10px;
    .cinema-position {
      font-size: 14px;
      color: #aaa;
      width: 255px;
    }
    .cinema-distance {
      font-size: 14px;
      color: #ccc;
    }
  }
  .cinema-list-bottom {
    // border: 1px solid #000;
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .change {
      border: 1px solid #1989fa;
      color: #1989fa;
      margin-right: 6px;
      margin-bottom: 4px;
      padding: 2px 4px;
      border-radius: 2px;
    }
    .snack,
    .discount {
      border: 1px solid #ffa500;
      color: #ffa500;
      margin-right: 6px;
      padding: 2px 4px;
      border-radius: 2px;
    }
  }
}
.cinema-bototm {
  padding-bottom: 10px;
}
</style>